<template>
  <HeaderNav active-index="5"></HeaderNav>
  <TaskContainer>
    <div class="toolbar">
      <el-button type="primary" @click="addClass">添加班级
        <template #icon>
          <el-icon>
            <CirclePlus/>
          </el-icon>
        </template>
      </el-button>
      <el-button type="danger" @click="batchRemove">批量删除
        <template #icon>
          <el-icon>
            <Delete/>
          </el-icon>
        </template>
      </el-button>
    </div>
    <el-table :data="list" style="width: 100%" border ref="tb_table">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="id" label="序号" width="80"/>
      <el-table-column prop="name" label="班级名"/>
      <el-table-column label="开班时间">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon>
              <timer/>
            </el-icon>
            <span style="margin-left: 10px">{{ scope.row.start_time.substring(0, 10)}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="班主任" prop="mange_name" width="120"/>

      <el-table-column label="状态" prop="state" width="70">
        <template #default="scope">
          <el-tag type="success" effect="dark" v-if="!scope.row.state">正常</el-tag>
          <el-tag type="info" effect="dark" v-else>毕业</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="课程时长(月)" prop="duration" width="120"/>
      <el-table-column label="预毕业时间" prop="graduate_time"/>

      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-button type="warning" size="small" :disabled="scope.row.state"
                     @click="handleGraduate(scope.$index, scope.row)">毕业
          </el-button>
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加分页插件 -->
    <div style="margin: 20px 0;">
      <el-pagination background layout="prev, pager, next"
                     hide-on-single-page
                     :page-size="pagination.rows"
                     :pager-count="11"
                     v-model:current-page="pagination.page"
                     :total="pagination.total"
					 @current-change="getClazzList"/>
					  <!--分页的时候在查一次数据-->
    </div>
  </TaskContainer>
</template>

<script>
import HeaderNav from "@/components/HeaderNav.vue"
import TaskContainer from "@/components/TaskContainer.vue"
import Condition from "@/components/Condition.vue"

export default {
  components: {
    HeaderNav,
    TaskContainer,
    Condition,
  },
  data() {
    return {
      pagination: {
        page: 1,
        rows: 20,
		total:0,
      },
      list: []
    }
  },
  created() {
    window.$bus.on('close-win-refresh', (index) => {
		  // 关闭弹出的窗口
		  layer.close(index);
		  // 刷新,查询所有班级
		  this.getClazzList()
    });
	
	this.getClazzList()
  },
  methods: {
	getClazzList(){
		//查询班级管理列表
		this.$api.getClazzList(this.pagination).then(ret=>{
			this.list=ret.results;
			this.pagination.total=ret.count;
		})
	},
    addClass(event) {
		//添加班级
      this.$layer.open({
        type: 2,
        title: '添加班级',
        shadeClose: true,
        shade: 0.5,
        area: ['650px', '360px'],
        btn: ['添加', '关闭'],
        content: '/clazz/add',
        yes: (index, layero) => {
          // 获取 打开的 弹出层 窗口对象
          let iframeWin = window[layero.find('iframe')[0]['name']];
          // 向 mitt 消息总线 发送 add-clazz 事件, 并传入 index 索引
          // 在 弹出的 clazz/add 页面中 监听 add-clazz、并完成 添加班级功能
          iframeWin.$bus.emit('add-clazz', index);
        }
      })
    },
	handleEdit(i, row){
		
		// console.log(row.id,"/////////11111111111111111111")
		//编辑班级
		this.$layer.open({
		  type: 2,
		  title: '编辑班级',
		  shadeClose: true,
		  shade: 0.5,
		  area: ['650px', '360px'],
		  btn: ['保存', '关闭'],
		  content: '/clazz/update?id='+row.id,
		  yes: (index, layero) => {
		    // 获取 打开的 弹出层 窗口对象
		    let iframeWin = window[layero.find('iframe')[0]['name']];
		    // 向 mitt 消息总线 发送 update-clazz 事件, 并传入 index 索引
		    // 在 弹出的 clazz/update 页面中 监听 update-clazz、并完成 班级的修改功能
		    iframeWin.$bus.emit('update-clazz', index);
		  }
		})
	},
	handleGraduate(i,data){
		// 修改毕业
		// 获取要修改的id
		data.state=true;
		this.$api.modifygraduate(data).then(ret=>{
			this.getClazzList()
		})
		
	},
	handleDelete(i,row){
		//删除班级
		let id =row.id
		this.$api.deleteClazz(id).then(ret=>{
			console.log(ret)
			this.getClazzList()
			this.$layer.msg(ret.message)
			return ;
		})
	},
    batchRemove(event) {
		//批量删除班级
		//获取表格中选中的行 (怎么获取表格中的元素:给要获取的表格加上ref)
		let arrays = this.$refs.tb_table.getSelectionRows();
		//获取要删除的班级ID列表
		let ids =arrays.map(obj=>obj.id)
		if (ids.length ===0){
			this.$layer.msg('请选中至少一个要删除的班级')
			return;
		}
		
		
		this.$layer.confirm('您确定要删除选中的数据吗?', {icon: 3, title:'提示'}, index=>{
			
			//调用批量删除班级的接口,完成班级 的批量删除
			this.$api.deleteAllClazz(ids).then(ret=>{
					this.getClazzList()//删除成功重新刷新列表
			})
		  
		  layer.close(index);
		});
		
      
    },
  }
}
</script>

<style scoped>
.table-modules {
  padding: 10px 20px;
}

.table-modules span {
  padding: 2px 10px;
  margin: 0 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.toolbar {
  position: relative;
  right: 10px;
  z-index: 200;
  text-align: right;
  margin: 20px;
  flex: 1 1 auto;
}
</style>